<script lang="ts" setup>
// 可以去modules中直接引用，也可以通过store/index引入
// import { storeToRefs } from 'pinia';
// import useCommonStore from '/@/store/modules/common';
// let pinia = useCommonStore();
// let { locale, theme } = storeToRefs(pinia);

// import {useStore} from '/@/store';
const { piniaCommon } = useStore();
// const { locale, theme } = storeToRefs(piniaCommon);

const data = reactive({
  theme: piniaCommon.$state.theme == 'light' ? true : false,
});
onMounted(() => {});
const changeElementClass = (isDark: boolean) => {
  document.documentElement.classList.toggle('light');
  document.documentElement.classList.toggle('dark');
  // if (isDark) {
  //   document.documentElement.removeAttribute('class');
  //   document.documentElement.setAttribute('class', 'dark');
  // } else {
  //   document.documentElement.removeAttribute('class');
  //   document.documentElement.setAttribute('class', 'light');
  // }
};

// 主题切换
const handleTheme = (value: any, e: any) => {
  // 获取到 transition API 实例
  const transition = document.startViewTransition(() => {
    changeElementClass(!value);
    piniaCommon.changeTheme(value ? 'light' : 'dark');
    document.documentElement.setAttribute('style', `color-scheme: ${value ? 'light' : 'dark'}`);
  });
  // 在 transition.ready 的 Promise 完成后，执行自定义动画
  transition.ready.then(() => {
    const { clientX, clientY } = e;

    // 计算半径，以鼠标点击的位置为圆心，到四个角的距离中最大的那个作为半径
    const radius = Math.hypot(Math.max(clientX, innerWidth - clientX), Math.max(clientY, innerHeight - clientY));
    const clipPath = [`circle(0% at ${clientX}px ${clientY}px)`, `circle(${radius}px at ${clientX}px ${clientY}px)`];
    document.documentElement.animate(
      {
        // 如果要切换到暗色主题，我们在过渡的时候从半径 100% 的圆开始，到 0% 的圆结束
        clipPath: !value ? clipPath.reverse() : clipPath,
      },
      {
        duration: 500,
        // 如果要切换到暗色主题，我们应该裁剪 view-transition-old(root) 的内容
        pseudoElement: !value ? '::view-transition-old(root)' : '::view-transition-new(root)',
      },
    );
  });
};
const handleTheme2 = (e: any) => {
  data.theme = !data.theme;
  changeElementClass(!data.theme);
  piniaCommon.changeTheme(data.theme ? 'light' : 'dark');
  document.documentElement.setAttribute('style', `color-scheme: ${data.theme ? 'light' : 'dark'}`);
};
// 多窗口监听 监听storage 改变其他窗口主题，语言变化
window.addEventListener('storage', function (e) {
  if (e.key === 'common') {
    let storage = JSON.parse(e.newValue || '{}');
    // 语言
    data.theme = storage.theme === 'dark' ? false : true;
  }
});
</script>

<template>
  <!-- <a-switch v-model:checked="data.theme" checked-children="浅色" un-checked-children="深色" @change="handleTheme" /> -->

  <a-switch v-model:checked="data.theme" @change="handleTheme">
    <template #checkedChildren>
      <div class="i-carbon-sun w-px-20 h-px-20 mt--5 c-black-t cursor-pointer" />
    </template>
    <template #unCheckedChildren>
      <div class="i-carbon-moon w-px-20 h-px-20 mt--6 cursor-pointer" />
    </template>
  </a-switch>

  <!-- <div v-if="data.theme" class="i-carbon-sun w-px-30 h-px-30 c-yellow cursor-pointer" @click="handleTheme2" />
  <div v-else class="i-carbon-moon w-px-30 h-px-30 c-white cursor-pointer" @click="handleTheme2" /> -->
</template>

<style lang="less" scoped>
:deep(.ant-switch-handle) {
  display: none;
}

.ant-switch {
  border: 1px solid #fff;
  background-color: rgba(221, 215, 215, 0.8);
}
.ant-switch-checked {
  border: 1px solid #bbb;
  background-color: #ccc;
  &:hover {
    background-color: #bbb !important;
  }
}
</style>
